<template>
  <div class="home">
    <v-head></v-head>
    <v-side :menuData="menuData"></v-side>
    <div class="content" :style="{height:height+'px'}">
      <transition name="fade" mode="out-in">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
      </transition>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import vHead from './head.vue'
import vSide from './sidebar.vue'
export default {
  name: 'Home',
  components: {
    vHead, vSide
  },
  data () {
    return {
      phenos: [],
      height: '',
      menuData: []
    }
  },
  methods: {
    getHeight () {
      this.height = window.innerHeight - 60
    },
    async getMenu () {
      const carType = localStorage.getItem('type')
      const res = await this.$api.post('/getMenu', carType)
      this.menuData = res.data
    }
  },
  mounted () {
    this.getHeight()
    this.getMenu()
    window.addEventListener('resize', this.getHeight)
  },
  created () {

  },
  unmounted () {
    window.removeEventListener('resize', this.getHeight)
  }
}
</script>
<style lang="scss" scoped>
  .content {
    position: absolute;
    top: 60px;
    right: 0;
    left: 200px;
    bottom: 0;
    width: auto;
    //height: 885px;
    padding: .5rem;
    box-sizing: border-box;
    overflow: auto;
    background: #f0f0f0;
    .fade-enter-active,
    .fade-leave-active {
    transition: opacity .2s;
}
    .fade-enter,
    .fade-leave {
    opacity: 0;
}
  }
</style>
